{% extends "registration/base.html" %}

{% load i18n %}
{% load qatrack_tags %}

{% block head_title %}{% trans "Change Password" %}{% endblock %}

{% block require_javascript %}
    require(['jquery', 'zxcvbn', 'password_strength'], function ($, zxcvbn, password_strength) {
        window.zxcvbn = zxcvbn;
        $("#id_old_password").focus();
    });
{% endblock %}

{% block account_box %}

<h1>{% if token_fail %}{% trans "Bad Token" %}{% else %}{% trans "Change Password" %}{% endif %}</h1>

{% if token_fail %}
  {% url 'password_reset' as passwd_reset_url %}
  <p>{% blocktrans %}The password reset link was invalid, possibly because it has already been used.  Please request a <a href="{{ passwd_reset_url }}">new password reset</a>.{% endblocktrans %}</p>
{% else %}
  {% if form %}
    <form method="POST" action="">
      <fieldset>
        {% csrf_token %}

        {% if form.non_field_errors %}
          <div class="alert alert-error">
              {% if form_error_title %}
                <strong>{{ form_error_title }}</strong>
              {% endif %}
              {% for error in form.non_field_errors %}
                {{ error }}<br />
              {% endfor %}
          </div>
        {% endif %}

        {% for field in form %}
          {% if field.is_hidden %}
            {{ field }}
          {% else %}
            <div class="form-group {% if field.errors %}has-error{% endif %}">
              {{ field|addcss_addplaceholder:"form-control" }}
              {% for error in field.errors %}
                <span class="help-block">{{ error }}</span>
              {% endfor %}
              {% if field.help_text %}
                <p class="help-block">{{ field.help_text|safe }}</p>
              {% endif %}
            </div>
          {% endif %}
        {% endfor %}

        <div class="form-actions">
            <button type="submit" class="btn btn-primary btn-flat">{% trans "Change password" %}</button>
        </div>
      </fieldset>
    </form>
  {% else %}
    <p>Your password is now changed.</p>
  {% endif %}
{% endif %}

{% endblock %}
